網站的基礎建設就像是建造一棟房子，首先需要有結構，而這個結構就是由 HTML（HyperText Markup Language，超文本標記語言） 來搭建的。HTML 是每個網站的基本骨架，它用標籤來定義網頁的內容和結構，幫助瀏覽器知道該如何顯示這些內容。在今天，我們將從零開始，學習如何使用 HTML 創建一個基本的網頁。
HTML 是一種標記語言，用來標記文本、圖片、鏈接等網頁元素，並告訴瀏覽器如何呈現這些內容。HTML 由一系列的標籤（Tags）組成，每個標籤都用來包裹某段內容，定義該內容的意圖或結構。
範例：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一個網站</title>
</head>
<body>
<h1>歡迎來到我的網站</h1>
<p>這是一個使用 HTML 撰寫的簡單網站。</p>
</body>
</html>
每個 HTML 文件的基本結構包括以下部分：
1.<!DOCTYPE html>：這行代碼位於 HTML 文件的最上方，它告訴瀏覽器這個文件使用的是 HTML5 標準。這是現今網頁開發的標準寫法，幫助瀏覽器正確解析文件。
2.<html>：整個 HTML 文件的根元素。所有的 HTML 標籤和內容都需要包裹在這個標籤內。
3.lang="zh-Hant"：定義了網頁的語言為繁體中文，這對於搜索引擎優化 (SEO) 和瀏覽器的無障礙功能（如螢幕閱讀器）都有幫助。
4.<head>：提供關於網頁的資訊（如編碼、標題等），不會顯示在網頁中。
5.<meta charset="UTF-8">：定義了文件的字符編碼。UTF-8 是當今互聯網使用最廣泛的字符編碼，支援所有語言的字符集，避免出現亂碼情況。
6.<title>：顯示在瀏覽器標籤上的網站標題。
7.<meta name="viewport" content="width=device-width, initial-scale=1.0">：這一行告訴瀏覽器如何渲染頁面，特別是在行動裝置上。width=device-width 表示頁面寬度應與設備螢幕寬度相同，而 initial-scale=1.0 表示初始縮放比例。這對於打造響應式網站尤為重要。
8.<body>：定義了網頁的可見內容，所有用戶能夠在瀏覽器中看到的內容都會放在這裡。
現在，我們來實際創建一個簡單的 HTML 頁面。可以使用前一天介紹的 Visual Studio Code 或其他文本編輯器來編寫代碼。
1.打開文本編輯器並新建一個文件。
2.使用 .html 作為文件的副檔名，例如 index.html。
3.在 HTML 文件中輸入!，然後按下 Tab 鍵或 Enter，這樣會生成基本的 HTML 結構
4.點擊 VS Code 左側的擴展圖標，然後在搜索框中輸入Live Server。
5.點擊安裝，安裝完畢後，你可以右鍵點擊 index.html 文件，選擇Open with Live Server，這樣可以在瀏覽器中查看 HTML 頁面的實時預覽。
為了幫助你更好地掌握 HTML，以下是幾個優秀的線上學習平台：
今天我們學習了 HTML 的基本概念、結構和常用標籤，並創建了你的第一個 HTML 頁面。明天，我們將繼續深入探討 CSS，學習如何使用樣式來美化你的網站。
iThome鐵人賽
看影片追技術